<template>
  <div>
    <h1 style="margin-left: 15px; line-height: 70px">
      <span class="ty_logo"></span>
      龙之梦线下停车场停车总数
    </h1>
    <input
      class="parkInput"
      type="number"
      min="0"
      v-model="parkNum"
      placeholder="请输入"
    />
    <button class="parkBtn" @click="update(parkNum)" type="primary">
      提交
    </button>
    <h1 style="margin-left: 15px; line-height: 70px">
      <span class="ty_logo"></span>
      道路拥堵指数
    </h1>
    <div style="margin-left: 15px; margin-bottom: 15px">
      1~4分别代表：畅通、部分畅通、轻度拥堵、拥堵
    </div>
    <input
      class="parkInput"
      type="number"
      min="0"
      v-model="traFicNum"
      placeholder="请输入"
    />
    <button class="parkBtn" @click="updateTrafic(traFicNum)" type="primary">
      提交
    </button>
    <h1 style="margin-left: 15px; line-height: 70px">
      <span class="ty_logo"></span>
      总人数上报
    </h1>
    <input
      class="parkInput"
      type="number"
      min="0"
      v-model="personNum"
      placeholder="请输入"
    />
    <button class="parkBtn" @click="updatePerson(personNum)" type="primary">
      提交
    </button>
    <h1 style="margin-left: 15px; line-height: 70px">
      <span class="ty_logo"></span>
      总车数上报
    </h1>
    <input
      class="parkInput"
      type="number"
      min="0"
      v-model="carNum"
      placeholder="请输入"
    />
    <button class="parkBtn" @click="updateCar(carNum)" type="primary">
      提交
    </button>
  </div>
</template>

<script>
import { requestAPI } from '@/api/TYRequest'
// import 'element-ui/lib/theme-chalk/index.css'
export default {
  name: 'LibenParkinput',
  // components: { ComponentName },
  // directives: { DirectiveName },
  data() {
    return {
      parkNum: '',
      traFicNum: '',
      personNum: '',
      carNum: '',
    }
  },
  mounted() {},
  methods: {
    // 更新线下停车场数据
    update(num) {
      console.log(num)
      // alert("提交成功")
      requestAPI('RoadCarNum?road_car_num=' + num, 'get')
        .then((res) => {
          console.log(res)
          this.$message({
            message: '线下停车场数据提交成功',
            type: 'success',
          })
        })
        .catch((error) => {
          this.$message.error('线下停车场数据提交失败，请再次尝试')
        })
    },
    // 更新道路拥堵指数
    updateTrafic(num) {
      requestAPI('RoadInfo?road_info=' + num, 'get')
        .then((res) => {
          console.log(res)
          this.$message({
            message: '道路拥堵指数提交成功',
            type: 'success',
          })
        })
        .catch((error) => {
          this.$message.error('道路拥堵指数提交失败，请再次尝试')
        })
    },
    // 更新总人数
    updatePerson(num) {
      requestAPI('PeopleSum?people_sum=' + num, 'get')
        .then((res) => {
          console.log(res)
          this.$message({
            message: '总人数提交成功',
            type: 'success',
          })
        })
        .catch((error) => {
          this.$message.error('总人数提交失败，请再次尝试')
        })
    },
    // 更新总车数
    updateCar(num) {
      requestAPI('CarSum?car_sum=' + num, 'get')
        .then((res) => {
          console.log(res)
          this.$message({
            message: '总车数提交成功',
            type: 'success',
          })
        })
        .catch((error) => {
          this.$message.error('总车数提交失败，请再次尝试')
        })
    },
  },
}
</script>

<style lang="less" scoped>
.ty_logo {
  display: block;
  width: 70px;
  height: 70px;
  float: left;
  background: url('~@/assets/map/tylogo.jpg') no-repeat;
  background-size: 100% 100%;
}
.parkInput {
  width: 280px;
  height: 30px;
  border-radius: 5px;
  line-height: 40px;
  padding: 9px;
  font-size: 18px;
  margin-left: 15px;
  border: 2px solid rgba(126, 126, 126, 0.333);
  &:focus-visible,
  &:focus-within {
    border-color: #0098ff;
    outline: none;
    border-width: 2px;
  }
}
.parkBtn {
  background: #0098ff;
  width: 100px;
  height: 50px;
  color: #fff;
  margin-left: 15px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 20px;
  &:hover,
  &:focus {
    background: #2baaff;
  }
}
</style>